//新版旅游攻略列表  景区攻略列表
.tl-strategy {
    .thumbs-up {
        display: inline-block;
        background-image: url(../../assets/images/autoGuide_icons.png);
        background-repeat: no-repeat;
        -webkit-background-size: 50px auto;
        background-size: 50px auto;
        width: 22px;
        height: 20px;
        //background-position-y: -174px;
        //background-position-x: -20px;
        background-position:-20px -174px;
        margin-right: 5px;
        position: relative;
        top: 1px;
    }
    .active-thumb{
        //background-position-y: -197px;
        //background-position-x: -21px;
        background-position: -21px -197px;
        top: 5px;
    }
    .banner {
        width: 100%;
        padding-top: 34%;
        position: relative;
        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        .info {
            background: -webkit-linear-gradient(bottom, rgba(15,15,15,1), rgba(15,15,15,0.5),rgba(15,15,15,0)); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom, rgba(15,15,15,1), rgba(15,15,15,0.5),rgba(15,15,15,0)); /* Safari 5.1 - 6.0 */
            background:-moz-linear-gradient(bottom, rgba(15,15,15,1), rgba(15,15,15,0.5),rgba(15,15,15,0)); /* Safari 5.1 - 6.0 */
            background:linear-gradient(bottom, rgba(15,15,15,1), rgba(15,15,15,0.5),rgba(15,15,15,0)); /* Safari 5.1 - 6.0 */
            color: #fff;
            position: relative;
            padding: 0px 10px;
        }
        .m-title {
            .noBreak();
            position: relative;
            top: 5px;
        }
        .tips {
            display: flex;
            font-size: 12px;
            .lt-tips {
              width: 170px;
                color: #aaa;
                line-height: 26px;
                .noBreak();
            }
            .rt-tips {
                flex: 1;
                text-align: right;
                position: relative;
                top: -2px;
                display: inline-block;
                color: #fff;
            }
        }
    }
    .strategy-group {
        padding: 10px 12px;
        //overflow-y:scroll;
        //height:308px;
        //margin-top:10px;
        .list-item {
            height: 100px;
            background-color: #fff;
            border-radius: 5px;
            padding: 0;
            margin-bottom:5px;
            .lt {
                flex: 1;
                max-width: 100px;
                height: 100px;
            }
            .rt {
                padding-right: 13px;
                .p-title{
                    display: block;
                    font-size:16px;
                    margin: 8px 0;
                    color: #333;
                   .tl{
                       .noBreak();
                   }
                    .p-notes{
                        font-size: 12px;
                        color: #999;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        min-height: 40px;
                    }
                }
                .limit {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    margin-bottom: 20px;
                    min-height: 50px;
                }
                .p-info {
                    display: flex;
                    color: #999;
                    font-size: 12px;
                    padding: 0 8px 0 0;
                    .brief {
                        flex: 1;
                        color:#999;
                    }
                    .rt-thumb{
                        position: relative;
                        top: -5px;
                    }
                }
            }
        }
    }
}

//新版景区攻略详情
.asdetail-wrap{
    background: #fff;
    .page-title{
        text-align: center;
        padding: 10px 0 0 0;
    }
    .date-travel{
        text-align: center;
        font-size: 16px;
        position: relative;
        padding: 5px 12px;
        .divider-line{
            margin: 0 auto;
            height: 1px;
            position: relative;
            top: -11px;
            background: #ccc;
        }
       .txt{
           position: relative;
           z-index: 22;
           background: #fff;
           margin: 0 auto;
           display: inline-block;
           b{
               padding: 0 10px;
               color: #f19503;
               font-size: 12px;
           }
           span{
               display: inline-block;
               width: 6px;
               height: 6px;
               background: #999;
               border-radius: 50%;
               position: relative;
               top: 0px;
           }
       }
    }
    .channel-content {
        box-sizing: border-box;
        padding: 0 15px;
        width: 100%;
        img {
            width: 100%;
            margin: 5px 0;
        }
    }
}
//新版景区攻略详情分享栏目
.wrap.hasFooter .no-border{
    background: #f7f7f7;
    height: 44px;
}
.form-wrap {
    display: flex;
    padding-top: 10px;
    a {
        text-align: center;
        height: 24px;
        .f-icon {
            background-image: url(../../assets/images/autoGuide_icons.png);
            background-repeat: no-repeat;
            width: 25px;
            height: 24px;
            margin: 0 auto;
            display: inline-block;
        }
    }
    .praise {
        flex:1;
        position: relative;
        border-right: 1px solid #9f9f9f;
        .f-icon {
            background-size: 75px auto;
            //background-position-y: -268px;
            //background-position-x: -38px;
            background-position:-38px -268px;
        }
        .p-count {
            position: relative;
            top: -5px;
            font-size: 14px;
            display: inline-block;
        }
    }
    .praised {
        flex:1;
        position: relative;
        border-right: 1px solid #9f9f9f;
        .f-icon {
            background-size: 75px auto;
            //background-position-y: -299px;
            //background-position-x: -38px;
            background-position:-38px -299px;
        }
        .p-count {
            position: relative;
            top: -5px;
            font-size: 14px;
            display: inline-block;
        }
    }
    .collect {
        flex:1;
        .f-icon {
            background-size: 50px auto;
            background-position-y: -265px;
            background-position-x: -25px;
        }
    }
    .collected {
        flex:1;
        .f-icon {
            background-size: 50px auto;
            background-position-y: -265px;
            background-position-x: -1px;
        }
    }
}

//新版地图
.map-wrap{
    .m-icon{
        background-image: url(../../assets/images/map-icon.png);
        background-repeat: no-repeat;
        -webkit-background-size: 60px auto;
        background-size: 60px auto;
        display: block;
        margin:0px auto;
    }
    .location-on{
        width: 31px;
        height: 50px;
        background-position-x: 0px;
        background-position-y: -47px;
    }
    .location-off{
        width: 31px;
        height: 50px;
        background-position-x: -30px;
        background-position-y:-47px;
    }
    .location-current{
        width: 33px;
        height: 50px;
        background-position-x: 1px;
        background-position-y: -92px;
    }
    .arrow{
        width: 35px;
        height: 41px;
        background-position-x: 0;
        background-position-y: -146px;
    }
}
.bottom-wrap{
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 399;
    overflow: auto;
    padding: 15px;
    .box-wrap{
        width: 100%;
        display: inline-flex;
        border-radius: 5px;
        background:#fff;
        padding: 8px 0;
        a{
            display: inline-block;
            position: relative;
            text-align: center;
            color: #333;
            .f-txt{
                font-size:14px;
            }
        }
        .f-icon{
            background-image: url(../../assets/images/map-icon.png);
            background-repeat: no-repeat;
            -webkit-background-size: 50px auto;
            background-size: 50px auto;
            width: 22px;
            height: 20px;
            display: block;
            margin:0px auto;
        }
        .lt-go{
            padding: 0 5px;
            .f-icon{
                position: relative;
                top: 10px;
                background-position-x:5px;
                background-position-y: -19px;
            }

        }
        .rt-go{
            padding: 0 5px;
            .f-icon{
                position: relative;
                top: 10px;
                background-position-x: -16px;
                background-position-y: -19px;
            }
        }
        .disabled{
            flex: 1;
            .f-icon{
                background-position-x:-18px;
                background-position-y:0;
            }
        }
        .selected{
            .f-icon{
                background-position-x: 3px;
                background-position-y: 0px;
            }
        }
    }

}

//新版游豆花销
.travel-beans {
    .midOne {
        position: relative;
        width: 100%;
        text-align: center;
        padding: 30px 0;
        color: #fff;
        font-size: 12px;
        img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: -1;
        }
        .titles {
            color: #fff;
            p:first-child {
                font-size: 18px;
            }
            p:nth-of-type(2){
                font-weight: 400;
                font-size: 50px;
                color: #fecb01;
            }
            p:last-child{
                font-size: 12px;
            }
        }
    }
    .beans_tab {
        .beans_navbar {
            display: flex;
            list-style: none;
            background-color: #fff;
            border-bottom: 15px solid #eee;
            li {
                position: relative;
                display: block;
                flex: 1;
                padding: 10px 0;
                text-align: center;
                font-size: 24px;
                line-height: 49px;
                color: #73a0da;
                .icon {
                    display: inline-block;
                    background-repeat: no-repeat;
                    -webkit-background-size: 60px auto;
                    background-size: 60px auto;
                    background-image: url("../../assets/images/icons.png");
                    height: 35px;
                    width: 39px;
                    position: relative;
                    top: 7px;
                }
                .earn {
                    background-position-y: -38px;
                    background-position-x: 0px;
                }
                .spend {
                    background-position-y: -110px;
                    background-position-x: 0;
                }
            }
            .item-on {
                background-color: #dab273;
                color: #fff;
                .earn {
                    background-position-y: -1px;
                    background-position-x: 0px;
                }
                .spend {
                    background-position-y: -75px;
                    background-position-x: 0;
                }
            }
        }
        .beans_tab_bd {
            background-color: #fff;
            .t {
                font-size: 18px;
            }
            .large {
                font-size: 15px;
            }
            .small {
                font-size: 13px;
                color: #888;
            }
            .earn-color {
                font-size: 18px;
                span{
                    color: #e00404;
                }

            }
            .spend-color {
                font-size: 18px;
                span{
                    color: #e00404;
                }
            }
        }
    }
}


//我的游记 my-travel-note
.myTravelNote-wrap{
    .user-header {
        position: relative;
        height: 160px;
        background: url("../../assets/images/travelbg.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding:15px 0;
        .user-portrait {
            width: 70px;
            height: 70px;
            margin: 0 auto;
            margin-top:20px;
            overflow: hidden;
            text-align: center;
            img {
                width: 70px;
                height: 70px;
                border-radius: 50%;
            }
        }
        .user-info {
            text-align: center;
            font-size: 18px;
            color: #fff;
            .u-number{
                font-size:12px;
            }
        }
    }
    .travel-line{
        padding: 30px 12px;
        .travelNote-item{
            font-size: 14px;
            .time-title{
                position: relative;
                padding: 5px 14px;
                background: #fff;
                width: 100px;
                border-radius: 27px;
                border: 1px solid #ddd;
                color: #999;
                text-align: center;
            }
            .time-title:before{
                content: "";
                width: 7px;
                height: 7px;
                background: #0175ec;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                display: block;
                position: absolute;
                top: 12px;
            }
            .connect-line{
                height: 15px;
                width: 1px;
                background: #ddd;
                margin-left: 18px;
            }
            .time-content{
                background: #fff;
                border-radius: 5px;
                border: 1px solid #ddd;
                .top-con{
                    border-bottom: 1px solid #ddd;
                    padding: 10px;
                    color: #666;
                    display: flex;
                    .address-icon,.edit-icon{
                        padding: 0px;
                        background: transparent;
                        display: inline-block;
                        background-image: url("../../assets/images/little-icons.png");
                        background-repeat: no-repeat;
                        background-size: 50px auto;
                        width: 25px;
                        height: 20px;
                    }
                    .address-icon{
                        background-position-x: -48px;
                        background-position-y: -166px;
                        position: relative;
                        top: 5px;
                        background-size: 68px auto;
                        width: 17px;
                    }
                    .edit-icon{
                        background-position-x: -25px;
                        background-position-y: -93px;
                        position: relative;
                        top: 4px;
                    }
                    .travel-adddress{
                        flex: 1;
                    }
                }
                .bottom-con{
                    display: flex;
                    padding: 10px;
                    color: #808080;
                    font-size: 16px;
                    .pic{
                        width: 65px;
                        height: 65px;
                        img{
                            width: 65px;
                            height: 65px;
                        }
                    }
                    .note{
                        flex: 1;
                        margin-left: 10px;
                        background: #e6e6e6;
                        text-align: center;
                        line-height: 65px
                    }
                }
            }
        }
    }
}

//游记详情-分享前
.myTravelNote-detail{
    .user-header {
        position: relative;
        width: 100%;
        height: 190px;
       img{
           width: 100%;
           height: 100%;
       }
        .user-info {
           position: absolute;
            top: 155px;
            left: 12px;
            .user-portrait {
                width: 130px;
                overflow: hidden;
                img {
                    width: 70px;
                    height: 70px;
                    border-radius: 50%;
                }
                .u-name{
                    position: absolute;
                    width:200px;
                    top: 10px;
                    left: 74px;
                    font-size: 14px;
                    font-weight: 700;
                    color:#fff;
                }
            }
        }
    }
    .travel-line{
        padding: 30px 12px;
        margin-top: 25px;
        .travelNote-item{
            font-size: 14px;
            .time-title{
                position: relative;
                padding: 5px 14px;
                background: #fff;
                width: 100px;
                border-radius: 27px;
                border: 1px solid #ddd;
                color: #999;
                text-align: center;
            }
            .time-title:before{
                content: "";
                width: 7px;
                height: 7px;
                background: #0175ec;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                border-radius: 50%;
                display: block;
                position: absolute;
                top: 12px;
            }
            .connect-line{
                height: 15px;
                width: 1px;
                background: #ddd;
                margin-left: 18px;
            }
            .txt-show{
                background: #fff;
                border-radius: 5px;
                border: 1px solid #ddd;
                margin-bottom: 5px;

                .top-con{
                    border-bottom: 1px solid #ddd;
                    padding: 10px;
                    color: #333;
                    display: flex;
                    font-size: 16px;
                    .address-icon,.edit-icon{
                        padding: 0px;
                        background: transparent;
                        display: inline-block;
                        background-image: url("../../assets/images/little-icons.png");
                        background-repeat: no-repeat;
                        background-size: 50px auto;
                        width: 25px;
                        height: 20px;
                    }
                    .address-icon{
                        background-position-x: -48px;
                        background-position-y: -166px;
                        position: relative;
                        top: 3px;
                        background-size: 68px auto;
                        width: 17px;
                    }
                    .edit-icon{
                        background-position-x: -25px;
                        background-position-y: -93px;
                        position: relative;
                        top: 4px;
                    }
                    .travel-adddress{
                        flex: 1;
                    }
                }
                .bottom-con{
                    display: flex;
                    padding:10px 25px;
                    color: #333;
                    font-size: 14px;
                }
            }
            .img-show{
                width: 100%;
                img{
                    width: 100%;
                    border-radius: 5px;
                }
            }
            //扫码关注
            .scan-code{
                position: relative;
                margin: 20px auto;
                background: #fff;
                width: 185px;
                border: 2px solid #333;
                border-radius: 13px;
                padding: 10px;
                .logo{
                    position: absolute;
                    top: -30px;
                    left: 50%;
                    margin-left: -30px;
                    display: inline-block;
                    background-image: url("../../assets/images/big-icons.png");
                    background-repeat: no-repeat;
                    background-size: 70px auto;
                    width: 60px;
                    height: 60px;
                    background-position-x: -0px;
                    background-position-y: -299px;
                }
                .txt{
                    text-align: center;
                    padding-bottom: 10px;
                    margin-top: 30px;
                    border-bottom: 2px solid #666;
                    margin-bottom: 10px;
                }
                .code-pic{
                    width: 100px;
                    height: 100px;
                    margin: 0 auto;
                    img{
                        width: 100px;
                        height: 100px;
                    }
                }
                .btm-note{
                    text-align: center;
                    i{
                        position: relative;
                        top: -12px;
                        display: inline;
                        border-top: 10px solid transparent;
                        border-right: 8px solid transparent;
                        border-bottom: 10px solid #333;
                        border-left: 8px solid transparent;
                    }
                    p{
                      font-size: 12px;
                    }
                }
            }
        }
    }
}
